<template>
	<view class="wraper">
		<view class="pic-box" :style="'height:'+_height+'rpx'">
			<view class="image-wrpaer">

				<UploadView class="imageList" v-for="(item, index) in fileList" :key="item.uuid"
					:ref="'uploadView'+index" :id="'uploadView'+index" :sourceFileList="fileList" :item="item"
					@uploading="uploading" @delete="uploadDelete" @error="uploadError" @success="uploadSuccess"
					@uploadPercent="uploadPercent" :percent="item.percent?item.percent:0" :type="'inputPanel'"
					:class="item.mediaType=='video'?'videoView':'uploadBtn'">
				</UploadView>

			</view>
		</view>

		<view class="flex-wraper">
			<view class="input-bg">
				<!-- <input class="input" :focus="autoFocus" :value="comment" @input="inputChange" @blur="inputBlur" @focus="inputFocus"
					maxlength="100" confirm-type="发送" type="text" :placeholder="placeholder"> -->
				<input @confirm="commentTouched" class="input" adjust-position="true" id="tableHeadFilterInp"
					ref="tableHeadFilterInp" :focus="autoFocus" :value="comment" @input="inputChange" @blur="inputBlur"
					@focus="inputFocus" maxlength="100" type="text" :placeholder="placeholder">
			</view>

			<view class="user-action">

				<view class="action-wraper" v-if="!isFocus && pageType!=='detail'">
					<image style="width: 36rpx;height: 34rpx;" @click.stop="thumbCommuntyTouched()"
						v-if="initValue.isThumbs" src="https://dnsverify.pfmoto.com/appstatic/community/ac-1-off.png"
						mode="aspectFill">
					</image>
					<image style="width: 36rpx;height: 34rpx;" @click.stop="thumbCommuntyTouched()" v-else
						src="https://dnsverify.pfmoto.com/appstatic/community/ac-1.png" mode="aspectFill">
					</image>

					<text class="action-wraper-text" style="margin-right: 40rpx;"
						@click.stop="thumbCommuntyTouched()">{{initValue.thumbsNum||'0'}}</text>
					<image style="width: 34rpx;height: 32rpx;" @click.stop="openMement()"
						src="https://dnsverify.pfmoto.com/appstatic/community/ac-2.png" mode="aspectFill">
					</image>
					<text class="action-wraper-text" @click.stop="openMement()">{{total||'0'}}</text>
				</view>
				<view class="action-wraper" v-else>
					<view class="upload-img" @click="selectMedia">
						<image class="upload-img-image"
							src="https://dnsverify.pfmoto.com/appstatic/community/upload-img.png" mode="">
						</image>
					</view>
					<text :class="isOk?'login-button active':'login-button'" @click="commentTouched">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@/utils/util.js");
	const network = require("@/manager/network-manager.js");
	const dialog = require("@/utils/dialog.js");
	export default {
		name: 'InputPanel',
		props: {
			total: {
				type: Number,
				default: () => {
					return 0
				}
			},
			itemValue: {
				type: Object,
				default: () => {
					return {}
				}
			},
			commentInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			commentType: {
				type: Number,
				default: () => {
					return 1
				}
			},
			placeholder: {
				type: String,
				default: () => {
					return ''
				}
			},
			//评论为‘activiity’
			fromType: {
				type: String,
				default: () => {
					return ''
				}
			},
			fromPage: {//comment/list
				type: String,
				default: () => {
					return ''
				}
			},
			//回复二级评论为‘2’，其余为‘’
			replyLevel: {
				type: String,
				default: () => {
					return ''
				}
			},
			//活动的评论详情 
			pageType:{
				type: String,
				default: () => {
					return ''
				}
			}
		},
		data() {
			return {
				isFocus: false,
				autoFocus: false,
				isOk: false,
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				selector: ['拍摄', '从手机相册选择'],
				showPic: false,
				comment: '',
				flag: false,

			}
		},
		computed: {
			_height: {
				get() {
					var height
					if (this.fileList.length > 1) {
						height = 144
					} else {
						height = 0
					}
					return height
				}
			},

			initValue: {
				get() {
					return this.itemValue
				},
				set(v) {

				}

			}


		},

		watch: {
			placeholder(val, oldVal) {
				var that = this
				if (val == '说点什么') {
					console.log('---')
					this.$nextTick(() => {
						this.autoFocus = false
						this.isFocus = false
					})
				} else {
					this.$nextTick(() => {
						this.autoFocus = true
						this.isFocus = true
					})
				}



			}

		},

		options: {
			styleIsolation: 'shared', // 
		},
		methods: {
			commentTouched() {

				if (util.isLogin(getApp())) {
					if (!this.isOk) {
						return
					}
					var that = this
					if (that.comment.length > 100) {
						uni.showToast({
							title: '最多输入100字',
							duration: 3000,
							icon: 'none'
						})
						return
					}
					if(this.fromType=='activity'){//活动
					
						if(that.replyLevel=='2' || that.replyLevel=='3'){//回复二级
							var uri = app.globalData.config.interfaces.URL_APP_REPLYCOMMENT
						}else{
							var uri = app.globalData.config.interfaces.URL_APP_CREATEPARTYCOMMENT;
						}
					}else{//除了活动
						if(that.replyLevel=='2' || that.replyLevel=='3'){//回复二级
							var uri = app.globalData.config.interfaces.URL_APP_COMMUNITYREPLYCOMMENT
						}else{
							var uri = app.globalData.config.interfaces.ULR_COMMUNTITY_COMMENT;
						}
					}
					debugger
					if(that.initValue!==null){
						var id = that.initValue.id//活动id
					}
					
					var commentType = 0
					
					if (this.placeholder !== '说点什么') {//回复评论
						if (that.commentInfo.uuid) {
							id = that.commentInfo.uuid
							commentType = that.commentType
						}else if((that.initValue==null || !that.initValue.id) && !that.commentInfo.uuid){
							id = that.commentInfo.id
						}
					}
					debugger
					var pid=""//回复二级及以下用，都是二级评论id
					
					//如果是活动，来自评论详情页面（fromPage=list）initValue：活动详情数据，commentInfo是选择的评论数据
					// if(that.fromPage=='list' && that.fromType=='activity'){
					// 	//回复二级及以下用，都是二级评论id
					// 	if(that.replyLevel=='2'){
					// 		id=that.commentInfo.uuid//回复二级评论:二级评论Id
					// 		pid=that.commentInfo.uuid//二级评论id
					// 	}else if(that.replyLevel=='3'){
					// 		id=that.commentInfo.id//回复三级评论及以下：三级评论id
					// 		pid=that.commentInfo.pid//二级评论id
					// 	}
					// }
					if(that.replyLevel=='2'){
						id=that.commentInfo.uuid//回复二级评论:二级评论Id
						pid=that.commentInfo.uuid//二级评论id
					}else if(that.replyLevel=='3'){
						id=that.commentInfo.id//回复三级评论及以下：三级评论id
						pid=that.commentInfo.pid//二级评论id
					}

					var pictureurl = ""
					console.log(JSON.stringify(that.fileList))
					console.log(that.fileList[0].url)
					if (that.fileList.length > 0 && (that.fileList[0].url != null && that.fileList[0].url != undefined)) {
						pictureurl = that.fileList[0].url
					}
					
					//#ifdef MP-WEIXIN
						var isfrom=3
					//#endif
					//#ifdef APP-PLUS||H5
						var isfrom=4
					//#endif
					
					var puserName
					var puserId
					//只有二级，三级有
					// if(that.initValue.authorId){//
					// 	puserName=that.initValue.authorName
					// 	puserId=that.initValue.authorId
					// }else{
					// 	puserName=that.commentInfo.authorName
					// 	puserId=that.commentInfo.authorId
					// }
					puserName=that.commentInfo.wechatName
					puserId=that.commentInfo.authorId
					if(that.replyLevel=='2' || that.replyLevel=='3'){
						var params = {
							"puserName":puserName,//被回复人名字
							// "puserName":'tra-tra',//被回复人名字
							"puserId":puserId,//被回复人id
							"pid": pid,//二级评论id
							"communityId": that.commentInfo.communityId,//活动id
							"repid":id,//回复二级评论:二级评论Id 回复三级评论及以下：三级评论及以下id
							"content": that.comment,
							"imageUrl": pictureurl,
							"authorId": app.getUserId(),
							"isfrom": isfrom,//3：小程序 4：app
						};
					}else{
						var params = {
							"communityId": that.initValue.id,
							"pid": id,
							"commentType": commentType,
							"authorId": app.getUserId(),
							"isfrom": 2,
							"content": that.comment,
							"imageUrl": pictureurl
						};
					}
					console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!_________________!!!!!!!!!!!!!!!!!'+pictureurl)
					console.log(JSON.stringify(params))
					this.flag = true
					console.log(params)
					network.post(uri, params, 'json', null, true).then(res => {
						console.log(res)
						if (res.code == 200) {
							that.comment = ""
							that.fileList = []
							var add = {
								type: 0,
								mediaType: 'add',
								url: '',
								path: '',
								uuid: util.createUidKey()
							}
							that.fileList.push(add)
							that.placeholder = "说点什么";
							params.id = res.data
							that.$emit('createComment', params)
						} else {

							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}
						that.flag = false
					}).catch(res => {
						console.log(res)
						that.flag = false
					});
				} else {
					uni.setStorageSync('momentDetailId', this.uuid)
					util.jumpLogin("momentDetail")
				}

			},
			selectMedia() {
				var that = this

				setTimeout(function() {
					that.isFocus = true
				}, 1000)
				uni.showActionSheet({
					itemList: that.selector,
					success: function(res) {
						that.confirm(res.tapIndex + 1)

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			confirm(e) {
				var idx = e
				if (this.fileList.length == 2) {
					uni.showToast({
						title: '最多1张图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				// var index = this.fileList.length - 1;
				// this.$refs['uploadView' + index][0].upload(e)
				var index = this.fileList.length - 1;
				if (idx == 2) {
					idx = 3
				}
				console.log(idx)
				this.$refs['uploadView' + index][0].upload(idx)
			},
			uploading(item) {

				if (item.mediaType == 'video') {
					return
				}
				this.fileList.push({
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				})
			},
			uploadSuccess(item) {
				debugger
				uni.hideLoading()
				// this.fileList.push(item)
				this.showPic = true
				var data = JSON.parse(JSON.stringify(this.fileList))
				// this.fileList = []
				var that = this
				// this.$nextTick(function() {
				// 	that.fileList = data
				// })
				if (this.myComment == '' && this.fileList.length == 1) {
					this.isOk = false

				} else {
					this.isOk = true
				}


				// this.fileList[0].url = item.url
				this.fileList[0] = item

				console.log(this.fileList)

			},
			uploadPercent() {

			},
			uploadError(item) {

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
			},
			uploadDelete(item) {

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				if (item.mediaType == 'video') {
					this.fileList.push({
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					})
				}
				if (this.comment == '') {
					this.isOk = false
				}
			},
			// 输入框获取焦点
			inputFocus() {
				this.isFocus = true
			},
			// 输入框失去焦点
			inputBlur() {
				// if(this.fromType!=='activity'){
				// 	var that = this
				// 	setTimeout(() => {
				// 		that.isFocus = false
				// 		that.openMement()
				// 	}, 500)
				// }
				
			},
			inputChange(val) {
				this.comment = val.detail.value

				if (val.detail.value) {

					this.isFocus = true
					this.isOk = true
				} else {
					// if(this.fromType!=='activity'){
					// 	this.openMement()
					// }
					this.isOk = false
					this.isFocus = false
				}
			},
			// 点赞/取消点赞
			thumbCommuntyTouched() {
				if (util.isLogin(getApp())) {
					if (this.flag) {
						return
					}
					var that = this
					
					var thumbsFlag
					this.initValue.isThumbs == 0 ? thumbsFlag = 1 : thumbsFlag = 0
					
					if(this.fromType=='activity'){
						var uri = app.globalData.config.interfaces.URL_APP_THUMBSPARTY;
						var params = {
							"id": this.initValue.id,
							"loginId": app.getUserId(),
							"isfrom": 0,
							"thumbsFlag": thumbsFlag
						};
					}else{
						var uri = app.globalData.config.interfaces.URL_COMMUNTIY_THUMB;
						var params = {
							"id": this.initValue.id,
							"loginId": app.getUserId(),
							"isfrom": 2,
							"thumbsFlag": thumbsFlag
						};
					}
					
					this.flag = true
					network.post(uri, params, 'form').then(res => {
						if (res.code == 200) {

							that.initValue.isThumbs = thumbsFlag
							thumbsFlag ? that.initValue.thumbsNum++ : that.initValue.thumbsNum--
							// that.$emit('updateThumbs',that.initValue.isThumbs,that.initValue.thumbsNum)
						} else {
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
						}
						that.flag = false
					}).catch(res => {
						console.log('33')
						that.flag = false
						setTimeout(() => {
							uni.showToast({
								title: res.errMsg,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
						console.error(res);
					});

				} else {
					util.jumpLogin();
				}
			},
			openMement() {
				var name = ''
				if (this.initValue.wechatName == '' || this.initValue.wechatName == null) {
					if (this.initValue.phone == '' || this.initValue.phone == null) {
						name = '已注销用户'
					} else {
						name = this.initValue.phone
					}
				} else {
					name = this.initValue.wechatName
				}
				this.$emit('changeHolder', "说点什么")

				// this.autoFocus = false
			}
		}
	}
</script>

<style lang='scss' scoped>
	/* #ifdef H5 || MP-WEIXIN */
	/deep/ .uploadImage,
	/deep/.upload-view {
		width: 144rpx !important;
		height: 144rpx !important;
	}

	/* #endif */

	.imageList,
	.myVideo {
		width: 144rpx !important;
		height: 144rpx !important;
	}

	.pic-box {

		margin: 0 0 10rpx 0;
	}

	.login-button {

		font-style: normal;
		font-weight: 400;
		font-size: 32rpx !important;
		line-height: 44rpx;
		display: flex;
		align-items: center;


		color: #ADB0AE;
	}

	.active {
		color: #ea5454 !important;
	}

	/* #ifdef H5 || MP-WEIXIN */
	/* //原生的按钮就是这样难改 */
	button.login-button[plain] {
		border: 0;
		background-color: #333333;
		color: #ffffff;
		font-size: 32rpx;
	}

	/* #endif */


	.upload-img-image {
		width: 48rpx !important;
		height: 40rpx !important;
		margin-right: 20rpx;
		position: relative;
		top: 2rpx;

	}

	.wraper {
		position: fixed;
		width: 710rpx;
		bottom: 0;
		padding: 20rpx 30rpx;
		left: 0;
		background-color: #ffffff;
		z-index: 99;
	}

	.flex-wraper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.image-wrpaer {
		display: flex;
		flex-direction: row;
	}

	.input {
		width: 430rpx;
		height: 68rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 68rpx;
		padding: 0 20rpx;

		color: #ADB0AE;


	}

	.input-bg {
		width: 460rpx;
		height: 68rpx;
		background-color: #ededed;
		border-radius: 4rpx;
		margin-right: 30rpx;
	}

	.user-action {
		display: flex;
		width: 220rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.action-wraper {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	/* 	.user-action image {
		width: 32rpx;
		height: 32rpx;
	} */

	.action-wraper-text {
		font-size: 24rpx;
		color: #ADB0AE;
		margin-right: 16rpx;

		margin-left: 4rpx;
		position: relative;
		top: 2rpx;
		margin-right: 20rpx;
	}

	.uploadImage {
		width: 144rpx !important;
		height: 144rpx !important;
	}
</style>
